<template>
  <!-- 房源管理 -->
  <div class="archives">
    <!-- 标题 -->
    <div class="archives-title">
      <span>房屋管理>房屋档案</span>
    </div>
    <!-- 社区 -->
    <div class="community">
      <!-- 社区图标 -->
      <div class="community-icon">
        <i class="iconfont icon-36school" style="font-size:30px;color: aquamarine;"></i>
      </div>
      <!-- 社区平台 -->
      <div class="community-name">
        <span>智慧平台Ⅰ</span>
      </div>
      <!-- 社区地址 -->
      <div class="community-address">
        XX省XX市XX区XX路XX号
      </div>
    </div>
    <!-- 区域管理 -->
    <div class="regional-management">
      <!-- 区域 -->
      <div class="regional-management-left">
        <div class="regional-management-left-item" v-for="item in state.propertyArea" :key="item.id"
          @click="changeArea(item.name)">
          <i class="iconfont icon-jiufuqianbaoicon06" style="color:#0A92FA ;font-weight: 700;"></i>
          <span style="color: #838380;margin-left: 14px;">{{ item.name }}</span>
        </div>
      </div>
      <!-- 该区域具体数据 -->
      <div class="regional-management-right">
        <!-- 新增数据按钮 -->
        <div class="addData">
          <div class="addButton" @click="openAddCard">
            <i class="iconfont icon-jiufuqianbaoicon06"
              style="background-color: #0A92FA;color:#E6F4FE;font-weight: 700;"></i>
            <div>
              新增房间
            </div>
          </div>
        </div>
        <!-- 数据展示表格 -->
        <el-table :data="state.tableData" border style="width: 100%">
          <el-table-column prop="id" label="序号" width="160" />
          <el-table-column prop="roomNumber" label="房间号" width="100" />
          <el-table-column prop="floor" label="楼层" width="140" />
          <el-table-column prop="unit" label="单元" width="140" />
          <el-table-column prop="Building" label="楼栋" width="140" />
          <el-table-column prop="villageName" label="小区名称" width="170" />
          <el-table-column prop="operation" label="操作" />
        </el-table>
      </div>
      <!-- 增加房间遮罩层 -->
      <div v-if="state.hidden === true" class="addroom">
        <!-- 增加房间的表单卡片 -->
        <div class="addroom-card">
          <!-- 楼栋选择 -->
          <div class="card-item">
            <div class="card-item-title">
              <div>楼</div>
              <div>栋</div>
              <div>选</div>
              <div>择:</div>
            </div>
            <el-tree-select v-model="state.selectAreaValue" :data="state.selectArea" style="width:200px;"
              :render-after-expand="false" />
          </div>
          <!-- 房间号填写 -->
          <div class="card-item">
            <div class="card-item-title">
              <div>房</div>
              <div>间</div>
              <div>ID:</div>
            </div>
            <el-input v-model="state.addRoomId" placeholder="ID" style="width:200px ;" clearable />
          </div>
          <!-- 房间号填写 -->
          <div class="card-item">
            <div class="card-item-title">
              <div>房</div>
              <div>间</div>
              <div>号:</div>
            </div>
            <el-input v-model="state.addRoomNumber" placeholder="房间号" style="width:200px ;" clearable />
          </div>
          <!-- 状态（是否住人） -->
          <div class="card-item">
            <div class="card-item-title">
              <div>房</div>
              <div>屋</div>
              <div>情</div>
              <div>况:</div>
            </div>
            <el-tree-select v-model="state.selectRoomState" :data="state.selectRoomStateB" style="width:200px;"
              :render-after-expand="false" />
          </div>
          <!-- 户型 -->
          <div class="card-item">
            <div class="card-item-title">
              <div>户</div>
              <div>型:</div>
            </div>
            <el-radio-group v-model="state.suiteType" class="ml-4">
              <el-radio label="套房" size="large">套房</el-radio>
              <el-radio label="宿舍" size="large">宿舍</el-radio>
            </el-radio-group>
          </div>
          <!-- 选择增加取消按钮 -->
          <div class="card-item" style="justify-content:space-between;">
            <!-- 取消按钮 -->
            <div class="button-cancel">
              <el-button @click="cancelRoom">取消</el-button>
            </div>
            <!-- 确定按钮 -->
            <div class="button-define">
              <el-button type="primary" @click="addRoom">确定</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="paging">
      <el-pagination background v-model:current-page="state.currentPage" v-model:page-size="state.pageSize" small
        layout="prev, pager, next, jumper" :total="state.total" @size-change="changeSizeChange"
        @current-change="handleCurrentChange" @prev-click="prevChange" @next-click="nextChange" />
    </div>
  </div>
</template>

<script>
import { onMounted, reactive } from "vue";
import getApi from "@/api/getApi";
export default {
  setup() {
    const state = reactive({
      AllRoomData: [],
      distinguishArea: {},
      propertyArea: [],
      selectAreaId: 1,
      addRoomId: null,
      ALLtableData: [],
      tableDataPage: [],
      tableData: [],
      total: null,
      hidden: false,
      selectArea: [
        {
          value: "南区",
          label: "南区",
          children: [
            {
              value: "南1",
              label: "南1",
              children: [
                {
                  value: "南区-南1-1层",
                  label: "南区-南1-1层",
                },
                {
                  value: "南区-南1-2层",
                  label: "南区-南1-2层",
                },
                {
                  value: "南区-南1-3层",
                  label: "南区-南1-3层",
                },
                {
                  value: "南区-南1-4层",
                  label: "南区-南1-4层",
                },
                {
                  value: "南区-南1-5层",
                  label: "南区-南1-5层",
                },
                {
                  value: "南区-南1-6层",
                  label: "南区-南1-6层",
                }
              ],
            },
            {
              value: "南2",
              label: "南2",
              children: [
                {
                  value: "南区-南2-1层",
                  label: "南区-南2-1层",
                },
                {
                  value: "南区-南2-2层",
                  label: "南区-南2-2层",
                },
                {
                  value: "南区-南2-3层",
                  label: "南区-南2-3层",
                },
                {
                  value: "南区-南2-4层",
                  label: "南区-南2-4层",
                },
                {
                  value: "南区-南2-5层",
                  label: "南区-南2-5层",
                },
                {
                  value: "南区-南2-6层",
                  label: "南区-南2-6层",
                }
              ],
            },
            {
              value: "南3",
              label: "南3",
              children: [
                {
                  value: "南区-南3-1层",
                  label: "南区-南3-1层",
                },
                {
                  value: "南区-南3-2层",
                  label: "南区-南3-2层",
                },
                {
                  value: "南区-南3-3层",
                  label: "南区-南3-3层",
                },
                {
                  value: "南区-南3-4层",
                  label: "南区-南3-4层",
                },
                {
                  value: "南区-南3-5层",
                  label: "南区-南3-5层",
                },
                {
                  value: "南区-南3-6层",
                  label: "南区-南3-6层",
                }
              ],
            },
            {
              value: "南4",
              label: "南4",
              children: [
                {
                  value: "南区-南4-1层",
                  label: "南区-南4-1层",
                },
                {
                  value: "南区-南4-2层",
                  label: "南区-南4-2层",
                },
                {
                  value: "南区-南4-3层",
                  label: "南区-南4-3层",
                },
                {
                  value: "南区-南4-4层",
                  label: "南区-南4-4层",
                },
                {
                  value: "南区-南4-5层",
                  label: "南区-南4-5层",
                },
                {
                  value: "南区-南4-6层",
                  label: "南区-南4-6层",
                }
              ],
            },
            {
              value: "南5",
              label: "南5",
              children: [
                {
                  value: "南区-南5-1层",
                  label: "南区-南5-1层",
                },
                {
                  value: "南区-南5-2层",
                  label: "南区-南5-2层",
                },
                {
                  value: "南区-南5-3层",
                  label: "南区-南5-3层",
                },
                {
                  value: "南区-南5-4层",
                  label: "南区-南5-4层",
                },
                {
                  value: "南区-南5-5层",
                  label: "南区-南5-5层",
                },
                {
                  value: "南区-南5-6层",
                  label: "南区-南5-6层",
                }
              ],
            },
            {
              value: "南6",
              label: "南6",
              children: [
                {
                  value: "南区-南6-1层",
                  label: "南区-南6-1层",
                },
                {
                  value: "南区-南6-2层",
                  label: "南区-南6-2层",
                },
                {
                  value: "南区-南6-3层",
                  label: "南区-南6-3层",
                },
                {
                  value: "南区-南6-4层",
                  label: "南区-南6-4层",
                },
                {
                  value: "南区-南6-5层",
                  label: "南区-南6-5层",
                },
                {
                  value: "南区-南6-6层",
                  label: "南区-南6-6层",
                }
              ],
            },
            {
              value: "南7",
              label: "南7",
              children: [
                {
                  value: "南区-南7-1层",
                  label: "南区-南7-1层",
                },
                {
                  value: "南区-南7-2层",
                  label: "南区-南7-2层",
                },
                {
                  value: "南区-南7-3层",
                  label: "南区-南7-3层",
                },
                {
                  value: "南区-南7-4层",
                  label: "南区-南7-4层",
                },
                {
                  value: "南区-南7-5层",
                  label: "南区-南7-5层",
                },
                {
                  value: "南区-南7-6层",
                  label: "南区-南7-6层",
                }
              ],
            },
            {
              value: "南8",
              label: "南8",
              children: [
                {
                  value: "南区-南8-1层",
                  label: "南区-南8-1层",
                },
                {
                  value: "南区-南8-2层",
                  label: "南区-南8-2层",
                },
                {
                  value: "南区-南8-3层",
                  label: "南区-南8-3层",
                },
                {
                  value: "南区-南8-4层",
                  label: "南区-南8-4层",
                },
                {
                  value: "南区-南8-5层",
                  label: "南区-南8-5层",
                },
                {
                  value: "南区-南8-6层",
                  label: "南区-南8-6层",
                }
              ],
            },
            {
              value: "南9",
              label: "南9",
              children: [
                {
                  value: "南区-南9-1层",
                  label: "南区-南9-1层",
                },
                {
                  value: "南区-南9-2层",
                  label: "南区-南9-2层",
                },
                {
                  value: "南区-南9-3层",
                  label: "南区-南9-3层",
                },
                {
                  value: "南区-南9-4层",
                  label: "南区-南9-4层",
                },
                {
                  value: "南区-南9-5层",
                  label: "南区-南9-5层",
                },
                {
                  value: "南区-南9-6层",
                  label: "南区-南9-6层",
                }
              ],
            }
          ],
        },
        {
          value: "西区",
          label: "西区",
          children: [
            {
              value: "西1",
              label: "西1",
              children: [
                {
                  value: "西区-西1-1层",
                  label: "西区-西1-1层",
                },
                {
                  value: "西区-西1-2层",
                  label: "西区-西1-2层",
                },
                {
                  value: "西区-西1-3层",
                  label: "西区-西1-3层",
                },
                {
                  value: "西区-西1-4层",
                  label: "西区-西1-4层",
                },
                {
                  value: "西区-西1-5层",
                  label: "西区-西1-5层",
                },
                {
                  value: "西区-西1-6层",
                  label: "西区-西1-6层",
                }
              ],
            },
            {
              value: "西2",
              label: "西2",
              children: [
                {
                  value: "西区-西2-1层",
                  label: "西区-西2-1层",
                },
                {
                  value: "西区-西2-2层",
                  label: "西区-西2-2层",
                },
                {
                  value: "西区-西2-3层",
                  label: "西区-西2-3层",
                },
                {
                  value: "西区-西2-4层",
                  label: "西区-西2-4层",
                },
                {
                  value: "西区-西2-5层",
                  label: "西区-西2-5层",
                },
                {
                  value: "西区-西2-6层",
                  label: "西区-西2-6层",
                }
              ],
            },
            {
              value: "西3",
              label: "西3",
              children: [
                {
                  value: "西区-西3-1层",
                  label: "西区-西3-1层",
                },
                {
                  value: "西区-西3-2层",
                  label: "西区-西3-2层",
                },
                {
                  value: "西区-西3-3层",
                  label: "西区-西3-3层",
                },
                {
                  value: "西区-西3-4层",
                  label: "西区-西3-4层",
                },
                {
                  value: "西区-西3-5层",
                  label: "西区-西3-5层",
                },
                {
                  value: "西区-西3-6层",
                  label: "西区-西3-6层",
                }
              ],
            },
            {
              value: "西4",
              label: "西4",
              children: [
                {
                  value: "西区-西4-1层",
                  label: "西区-西4-1层",
                },
                {
                  value: "西区-西4-2层",
                  label: "西区-西4-2层",
                },
                {
                  value: "西区-西4-3层",
                  label: "西区-西4-3层",
                },
                {
                  value: "西区-西4-4层",
                  label: "西区-西4-4层",
                },
                {
                  value: "西区-西4-5层",
                  label: "西区-西4-5层",
                },
                {
                  value: "西区-西4-6层",
                  label: "西区-西4-6层",
                }
              ],
            },
            {
              value: "西5",
              label: "西5",
              children: [
                {
                  value: "西区-西5-1层",
                  label: "西区-西5-1层",
                },
                {
                  value: "西区-西5-2层",
                  label: "西区-西5-2层",
                },
                {
                  value: "西区-西5-3层",
                  label: "西区-西5-3层",
                },
                {
                  value: "西区-西5-4层",
                  label: "西区-西5-4层",
                },
                {
                  value: "西区-西5-5层",
                  label: "西区-西5-5层",
                },
                {
                  value: "西区-西5-6层",
                  label: "西区-西5-6层",
                }
              ],
            },
            {
              value: "西6",
              label: "西6",
              children: [
                {
                  value: "西区-西6-1层",
                  label: "西区-西6-1层",
                },
                {
                  value: "西区-西6-2层",
                  label: "西区-西6-2层",
                },
                {
                  value: "西区-西6-3层",
                  label: "西区-西6-3层",
                },
                {
                  value: "西区-西6-4层",
                  label: "西区-西6-4层",
                },
                {
                  value: "西区-西6-5层",
                  label: "西区-西6-5层",
                },
                {
                  value: "西区-西6-6层",
                  label: "西区-西6-6层",
                }
              ],
            },
          ],
        },
        {
          value: "西区食堂",
          label: "西区食堂",
          children: [
            {
              value: "西区食堂-1层",
              label: "西区食堂-1层",
            },
            {
              value: "西区食堂-2层",
              label: "西区食堂-2层",
            },
            {
              value: "西区食堂-3层",
              label: "西区食堂-3层",
            },
          ],
        },
        {
          value: "研究生区",
          label: "研究生区",
          children: [
            {
              value: "研1",
              label: "研1",
              children: [
                {
                  value: "研究生区-研1-1层",
                  label: "研究生区-研1-1层",
                },
                {
                  value: "研究生区-研1-2层",
                  label: "研究生区-研1-2层",
                },
                {
                  value: "研究生区-研1-3层",
                  label: "研究生区-研1-3层",
                },
                {
                  value: "研究生区-研1-4层",
                  label: "研究生区-研1-4层",
                },
                {
                  value: "研究生区-研1-5层",
                  label: "研究生区-研1-5层",
                },
                {
                  value: "研究生区-研1-6层",
                  label: "研究生区-研1-6层",
                },
                {
                  value: "研究生区-研1-7层",
                  label: "研究生区-研1-7层",
                },
                {
                  value: "研究生区-研1-8层",
                  label: "研究生区-研1-8层",
                },
                {
                  value: "研究生区-研1-9层",
                  label: "研究生区-研1-9层",
                },
                {
                  value: "研究生区-研1-10层",
                  label: "研究生区-研1-10层",
                },
                {
                  value: "研究生区-研1-11层",
                  label: "研究生区-研1-11层",
                },
                {
                  value: "研究生区-研1-12层",
                  label: "研究生区-研1-12层",
                },
                {
                  value: "研究生区-研1-13层",
                  label: "研究生区-研1-13层",
                },
              ],
            },
            {
              value: "研2",
              label: "研2",
              children: [
                {
                  value: "研究生区-研2-1层",
                  label: "研究生区-研2-1层",
                },
                {
                  value: "研究生区-研2-2层",
                  label: "研究生区-研2-2层",
                },
                {
                  value: "研究生区-研2-3层",
                  label: "研究生区-研2-3层",
                },
                {
                  value: "研究生区-研2-4层",
                  label: "研究生区-研2-4层",
                },
                {
                  value: "研究生区-研2-5层",
                  label: "研究生区-研2-5层",
                },
                {
                  value: "研究生区-研2-6层",
                  label: "研究生区-研2-6层",
                },
                {
                  value: "研究生区-研2-7层",
                  label: "研究生区-研2-7层",
                },
                {
                  value: "研究生区-研2-8层",
                  label: "研究生区-研2-8层",
                },
                {
                  value: "研究生区-研2-9层",
                  label: "研究生区-研2-9层",
                },
                {
                  value: "研究生区-研2-10层",
                  label: "研究生区-研2-10层",
                },
                {
                  value: "研究生区-研2-11层",
                  label: "研究生区-研2-11层",
                },
                {
                  value: "研究生区-研2-12层",
                  label: "研究生区-研2-12层",
                },
                {
                  value: "研究生区-研2-13层",
                  label: "研究生区-研2-13层",
                },
              ],
            },
            {
              value: "研3",
              label: "研3",
              children: [
                {
                  value: "研究生区-研3-1层",
                  label: "研究生区-研3-1层",
                },
                {
                  value: "研究生区-研3-2层",
                  label: "研究生区-研3-2层",
                },
                {
                  value: "研究生区-研3-3层",
                  label: "研究生区-研3-3层",
                },
                {
                  value: "研究生区-研3-4层",
                  label: "研究生区-研3-4层",
                },
                {
                  value: "研究生区-研3-5层",
                  label: "研究生区-研3-5层",
                },
                {
                  value: "研究生区-研3-6层",
                  label: "研究生区-研3-6层",
                },
                {
                  value: "研究生区-研3-7层",
                  label: "研究生区-研3-7层",
                },
                {
                  value: "研究生区-研3-8层",
                  label: "研究生区-研3-8层",
                },
                {
                  value: "研究生区-研3-9层",
                  label: "研究生区-研3-9层",
                },
                {
                  value: "研究生区-研3-10层",
                  label: "研究生区-研3-10层",
                },
                {
                  value: "研究生区-研3-11层",
                  label: "研究生区-研3-11层",
                },
                {
                  value: "研究生区-研3-12层",
                  label: "研究生区-研3-12层",
                },
                {
                  value: "研究生区-研3-13层",
                  label: "研究生区-研3-13层",
                },
              ],
            },
          ],
        },
      ],
      selectAreaValue: "楼栋选择",
      addRoomNumber: "",
      selectRoomState: "",
      selectRoomStateB: [
        {
          value: "使用中",
          label: "使用中",
        },
        {
          value: "闲置",
          label: "闲置",
        },
        {
          value: "锁定",
          label: "锁定",
        },
      ],
      suiteType: "",
      pageSize: 8,
      currentPage: 1,
    });
    // 生命周期
    onMounted(() => {
      getAreaInfo();
    });
    // 读取cookie缓存token
    const getCookie = (cname) => {
      // 参数为存储名
      var name = cname + "=";
      var ca = document.cookie.split(";");
      for (var i = 0; i < ca.length; i++) {
        var c = ca[i].trim();
        if (c.indexOf(name) == 0)
          return decodeURIComponent(c.substring(name.length, c.length));
      }
      return "";
    };
    // 申请物业各区域的数据
    const getAreaInfo = () => {
      // 申请东南西北四个区域的大致数据，里面要有其它各区域楼栋房子的链接
      // getApi().then((res)=>{

      // })
      getApi(
        "/roomhead",
        "get",
        {},
        { Authorization: getCookie("token") }
      ).then((res) => {
        // console.log(res)
        state.AllRoomData = res.data.data;
        distinguishData();
      });
    };
    // 遍历房间进行前端分区
    const distinguishData = () => {
      state.distinguishArea = {};
      for (let i = 0; i < state.AllRoomData.length; i++) {
        if (state.distinguishArea[state.AllRoomData[i].region]) {
          state.distinguishArea[state.AllRoomData[i].region].push(
            state.AllRoomData[i]
          );
        } else {
          state.distinguishArea[state.AllRoomData[i].region] = [];
          state.distinguishArea[state.AllRoomData[i].region].push(
            state.AllRoomData[i]
          );
        }
      }
      let arr = [];
      let id = 1;
      for (let key in state.distinguishArea) {
        let obj = {};
        obj.id = id;
        obj.name = key;
        arr.push(obj);
        id++;
      }
      state.propertyArea = arr;
      changeArea(state.propertyArea[0].name);
      // console.log(state.distinguishArea)
    };
    // 点击切换区域（如管理区域从北区一期变成南区二期）
    const changeArea = (key) => {
      // getApi(url,'get',{},{Authorization:getCookie('token')}).then((res)=>{
      //     console.log(res)
      // })
      let arr = [];
      // console.log(state.distinguishArea[key])
      // console.log(arr)
      for (let i in state.distinguishArea[key]) {
        let obj = {};
        obj.id = state.distinguishArea[key][i].roomId;
        obj.roomNumber = state.distinguishArea[key][i].roomName;
        obj.floor = state.distinguishArea[key][i].floor;
        obj.Building = state.distinguishArea[key][i].buildingName;
        obj.villageName = state.distinguishArea[key][i].projectInfo;
        obj.unit = state.distinguishArea[key][i].useStatus;
        obj.other = state.distinguishArea[key][i];
        arr.push(obj);
      }
      state.ALLtableData = arr;
      state.total = parseInt(
        Math.ceil(state.ALLtableData.length / state.pageSize) * state.pageSize
      );
      handleSizeChange();
    };
    // 打开新增房间的遮罩层卡片
    const openAddCard = () => {
      state.hidden = true;
    };
    // 确定新增房间按钮
    const addRoom = () => {
      let fen = state.selectAreaValue.split("-");
      let region = fen[0];
      let buildingName = fen[1];
      let floor = parseInt(fen[2][0]);
      // console.log(floor)
      let obj = {
        roomId: state.addRoomId,
        region: region,
        projectInfo: "东华理工大学_宿舍",
        buildingName: buildingName,
        floor: floor,
        suiteName: state.suiteType,
        roomName: state.addRoomNumber,
        hasBunk: "是",
        availableArea: 2000,
        leasedArea: 1000,
        bunkCount: 4,
        useStatus: "空置",
        purposeName: "员工宿舍",
        note: "备注",
      };
      console.log(obj);
      // 把obj作为数据对象传到后端，发起请求
      getApi("/roomhead", "post", obj, {
        Authorization: getCookie("token"),
      }).then((res) => {
        console.log(res);
        if (res.data.msg === "添加成功") {
          ElMessage({
            message: "房间添加成功",
            type: "success",
          });
          getAreaInfo();
          state.selectAreaValue = "楼栋选择";
          state.addRoomNumber = "";
          state.selectRoomState = "";
          state.suiteType = "";
          state.hidden = false;
        } else {
          ElMessage.error("添加失败");
        }
      });
    };
    // 取消新增房间按钮
    const cancelRoom = () => {
      state.selectAreaValue = "楼栋选择";
      state.addRoomNumber = "";
      state.selectRoomState = "";
      state.suiteType = "";
      state.hidden = false;
    };
    const handleSizeChange = () => {
      if (state.ALLtableData.length < 8) {
        // console.log(state.ALLtableData)
        let res = [];
        res.push(state.ALLtableData);
        state.tableDataPage = res;
      } else {
        let count = 0;
        let res = [];
        for (let i = 0; i < state.ALLtableData.length; i++) {
          if (i != state.ALLtableData.length - 1) {
            if (i == 0) {
              continue;
            }
            if (i % state.pageSize == 0) {
              let arr = state.ALLtableData.slice(count, i);
              count = i;
              res.push(arr);
            }
          } else {
            let arr = state.ALLtableData.slice(count, i + 1);
            res.push(arr);
          }
        }
        state.tableDataPage = res;
      }

      // console.log(res)
      // state.tableDataPage = res;
      handleCurrentChange(1);
    };
    // page-size分页器事件
    const changeSizeChange = () => { };
    // current-page分页器事件
    const handleCurrentChange = (e) => {
      console.log(e, "e");
      // 切换页数，然后把e传参的页数传进来，然后发起下一页的数据请求，然后申请完将拿到的数据数组赋值给state.showData
      state.tableData = state.tableDataPage[e - 1];
      state.currentPage = e;
    };
    // 点击上一页分页器触发事件
    const prevChange = (e) => {
      // console.log(e,2)
    };
    // 点击下一页分页器触发事件
    const nextChange = (e) => {
      // console.log(e,3)
    };

    return {
      state,
      changeArea,
      openAddCard,
      addRoom,
      cancelRoom,
      handleSizeChange,
      handleCurrentChange,
      prevChange,
      nextChange,
      changeSizeChange,
    };
  },
};
</script>

<style lang="less" scoped>
.archives {
  margin-top: 10px;
  width: 100%;
  height: calc(100% - 10px);
  background: #ffffff;
  padding: 20px 20px 20px 20px;
  box-sizing: border-box;
  position: relative;
  overflow: hidden;
  overflow-y: scroll;


  .archives-title {
    color: #9c9e9c;
  }

  .community {
    margin-top: 20px;
    display: flex;
    align-items: center;
    font-size: 13px;

    .community-name {
      margin-left: 30px;
      color: #616261;
    }

    .community-address {
      margin-left: 30px;
      color: #616261;
    }
  }

  .regional-management {
    width: 100%;
    display: flex;
    margin-bottom: 50px;

    .regional-management-left {
      width: 200px;
      margin-top: 30px;

      .regional-management-left-item {
        margin-bottom: 16px;
        cursor: pointer;
      }
    }

    .regional-management-right {
      margin-top: 20px;
      width: calc(100% - 200px);

      .addData {
        display: flex;
        justify-content: flex-end;
        margin-bottom: 30px;

        .addButton {
          background-color: #e6f4fe;
          color: #0a92fa;
          width: 100px;
          height: 30px;
          display: flex;
          justify-content: space-around;
          align-items: center;
          border-radius: 5px;
          margin-right: 40px;
          cursor: pointer;
        }
      }
    }

    .addroom {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 10;
      height: 100vh;
      width: 100vw;
      background: rgba(75, 75, 75, 0.24);
      display: flex;
      justify-content: center;
      align-items: center;

      .addroom-card {
        width: 500px;
        height: 350px;
        background-color: #ffffff;
        border-radius: 8px;
        padding: 20px 120px 20px 100px;
        box-sizing: border-box;

        .card-item {
          display: flex;
          align-items: center;
          margin-top: 14px;

          .card-item-title {
            width: 66px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-right: 14px;
          }
        }
      }
    }
  }

  .paging {
    width: calc(100% - 32px);
    margin-bottom: 30px;
    display: flex;
    justify-content: center;
  }
}
::-webkit-scrollbar{
  width: 7px;
}

</style>
